<template>
  <div class="custom-container">
    自定义指令学习
    <h3 v-color>简单自定义指令练习</h3>
    <h3 v-color2="myColor">binding自定义指令练习-data值</h3>
    <button @click="myColor = 'green'">变绿(update使用)</button>
    <button @click="myColor = 'blue'">变蓝(update使用)</button>
    <h3 v-color2="'orange'">binding自定义指令练习-行内</h3>
    <h3 v-color3="myColor">binding自定义指令练习-data值</h3>
  </div>
</template>

<script>
export default {
  name: 'Custom',
  data() {
    return {
      myColor: 'blue',
    }
  },
  //私有自定义指令
  directives: {
    //定义color指令
    color: {
      //指令被绑定到DOM元素上就会触发bind方法(只会调用一次)
      bind(el) {
        el.style.color = 'red'
      },
    },
    color2: {
      //固定写法，第二个参数binding存放这传的参数(只会调用一次)
      bind(el, binding) {
        el.style.color = binding.value
      },
      //数据更新后会被触发（多次，但是DOM初始化的时候不会调用）
      update(el, binding) {
        el.style.color = binding.value
      },
    },
    //当bind和update方法一致时，可以使用下面的简化形式
    color3(el, binding) {
      el.style.color = binding.value
    },
  },
}
</script>

<style scoped>
.custom-container {
  min-height: 250px;
  background-color: chocolate;
}
</style>
